﻿
@model conffandauthh.Models.BigSearchFriendModel

@using Microsoft.AspNet.Identity


@{
    ViewBag.Title = "Wideoczat";
   
}

@if (Request.IsAuthenticated)
{
   
    // zapraszanie innych osób do pokoju

    // lista znajomych

    <table id="friendsTable">
        <tr>
            <td>Zaproś znajomego do rozmowy</td>
        </tr>
        @foreach (var item in Model.tofriends)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Email)
                    <button id="addThisFriend" type="button" value=@Html.DisplayFor(modelItem => item.Email)>Zaproś</button>
                </td>
            </tr>
        }
    </table>
    // dodawanie przy pomocy email
    <div id="addFriend">
        Możesz także wprowadzić email osoby, którą chcesz zaprosić do rozmowy: <input id="friendName" />
        <button type="button" id="addFriendButton">Zaproś</button>
        <p id="sendedRoomInvitation" style="display:inline"></p>
    </div>

    <div id="notifications">
        <h3>Powiadomienia</h3>
    </div>
    <h3 id="title">Utwórz pokój</h3>
    <form id="createRoom">
        Nazwa pokoju: <input id="sessionInput" /><br />
        Hasło do pokoju: <input id="passwordInput" /><br />
        <button disabled type="submit">Stwórz nowy pokój</button>
    </form>
        <p id="subTitle"></p>

        <div>
            <button id="screenShareButton"></button>
            <p>
                <font color="red">Informacja: </font>W celu uruchomienia podglądu puplitu należy używać szyfrowanego połączenia (HTTPS)
                oraz zmienić odpowiednie ustawienia w przeglądarce. W przypadku Firefox należy w pasku
                adresu wpisać <i>about:config</i> i odnaleźć opcję <i>media.getusermedia.screensharing.allowed_domains</i>.
                Należy ją zmodyfikować dopisując na końcu <i>ptkonferencje.azurewebsites.net</i>
            </p>
        </div>
        <hr>
        <div class="videoContainer">
            <video id="localVideo" style="height: 150px;" oncontextmenu="return false;"></video>
            <meter id="localVolume" class="volume" min="-45" max="-20" high="-25" low="-40"></meter>
        </div>
        <div id="localScreenContainer" class="videoContainer">
        </div>
        <div id="remotes"></div>
        <hr>

        <div id="Showsend" style="display:none">
            <textarea rows="4" cols="50" id="messageee"></textarea>
            <input type="button" id="sendmessage" value="Wyślij" />


            <ul id="discussion"></ul>
                     

        </div>
        <input type="hidden" id="displayname" value="@ViewBag.Nick" />
        <input type="hidden" id="invitationscount" value="@ViewBag.mess" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script src="/Scripts/latest-v2.js"></script>

    // obsługa dodawania znajomych do pokoju
    <script src="~/Scripts/room.invitations.js"></script>

    // obsługa webrtc
    <script>



        var invitearray = @Html.Raw(Json.Encode(Model.toinivitations.ListFriends));



        $(document).ready(function () {



            // ANIMATEDLY DISPLAY THE NOTIFICATION COUNTER.
            $('#noti_Counter')
                .css({ opacity: $('#invitationscount').val() })
                .text($('#invitationscount').val())              // ADD DYNAMIC VALUE (YOU CAN EXTRACT DATA FROM DATABASE OR XML).
                .css({ top: '-10px' })
                .animate({ top: '-2px', opacity: $('#invitationscount').val()}, 500);

            $('#noti_Button').click(function () {

                // TOGGLE (SHOW OR HIDE) NOTIFICATION WINDOW.
                $('#notifications1').fadeToggle('fast', 'linear', function () {
                    if ($('#notifications1').is(':hidden')) {
                        $('#noti_Button').css('background-color', '#FFF');
                    }
                    else $('#noti_Button').css('background-color', '#FFF');        // CHANGE BACKGROUND COLOR OF THE BUTTON.
                });

                $('#noti_Counter').fadeOut('slow');                 // HIDE THE COUNTER.

                return false;
            });

            // HIDE NOTIFICATIONS WHEN CLICKED ANYWHERE ON THE PAGE.
            $(document).click(function () {
                $('#notifications1').hide();

                // CHECK IF NOTIFICATION COUNTER IS HIDDEN.
                if ($('#noti_Counter').is(':hidden')) {
                    // CHANGE BACKGROUND COLOR OF THE BUTTON.
                    $('#noti_Button').css('background-color', '#FFF');
                }
            });

            $('#notifications1').click(function () {
                return false;       // DO NOTHING WHEN CONTAINER IS CLICKED.
            });





            for (var i = 0; i <invitearray.length; i++) {
         
                $('#areatoacceptinvitations').append('<strong>'+invitearray[i]+'</strong>'
               + '&nbsp;&nbsp; <button class = "buttons1" name = "ltrContainer1" >'+'Zaakceptuj'+'</button>'+ '&nbsp;&nbsp; <button class = "buttons2" name = "ltrContainer2" >'+'Odrzuć'+'</button>'+'<br/>');
            }

            $('#areatoacceptinvitations').on('click', '.buttons1', function() {
                // Do something on click on an existent or future .dynamicElement
              //event.stopImmediatePropagation();
                var myValue = $(this).prev().html();
              
                console.log("Email: " + myValue );
                $.post('https://' + location.host + '/Home/Friendinviteaccept', { email: myValue, model: invitearray, view:"" }, function(data){
               
                    for (var i=invitearray.length-1; i>=0; i--) {
                        if (invitearray[i] === myValue) {
                            console.log("Email: " + myValue +" "+invitearray[i]);
                            invitearray.splice(i, 1);
                            // break;       //<-- Uncomment  if only the first term has to be removed
                        }
                    }
               
                    document.getElementById('areatoacceptinvitations').innerHTML = "";
                    
                    for (var i = 0; i <invitearray.length; i++) {
         
                        $('#areatoacceptinvitations').append('<strong>'+invitearray[i]+'</strong>'
                       + '&nbsp;&nbsp; <button class = "buttons1" name = "ltrContainer1" >'+'Zaakceptuj'+'</button>'+ '&nbsp;&nbsp; <button class = "buttons2" name = "ltrContainer2" >'+'Odrzuć'+'</button>'+'<br/>');
                    }
              
                    alert('Zaproszenie od użytkownika '+myValue+' zostało zaakceptowane'); 
                });

           

            });


            $('#areatoacceptinvitations').on('click', '.buttons2', function() {
                // Do something on click on an existent or future .dynamicElement
                //event.stopImmediatePropagation();
                var myValue = $(this).prev().prev().html();
              
                console.log("Email: " + myValue );
                $.post('https://' + location.host + '/Home/Friendrejected', { email: myValue, model: invitearray, view:"" }, function(data){
               
                    for (var i=invitearray.length-1; i>=0; i--) {
                        if (invitearray[i] === myValue) {
                            console.log("Email: " + myValue +" "+invitearray[i]);
                            invitearray.splice(i, 1);
                            // break;       //<-- Uncomment  if only the first term has to be removed
                        }
                    }
               
                    document.getElementById('areatoacceptinvitations').innerHTML = "";
                    
                    for (var i = 0; i <invitearray.length; i++) {
         
                        $('#areatoacceptinvitations').append('<strong>'+invitearray[i]+'</strong>'
                       + '&nbsp;&nbsp; <button class = "buttons1" name = "ltrContainer1" >'+'Zaakceptuj'+'</button>'+ '&nbsp;&nbsp; <button class = "buttons2" name = "ltrContainer2" >'+'Odrzuć'+'</button>'+'<br/>');
                    }
              
                    alert('Zaproszenie od użytkownika '+myValue+' zostało odrzucone'); 
                });

            });

        });

        
       








        // pobieranie nazwy pokoju z URL
        var room = location.search && location.search.split('?')[1];

        // create our webrtc connection
        var webrtc = new SimpleWebRTC({
            //url: 'http://localhost:8888/',
            // the id/element dom element that will hold "our" video
            localVideoEl: 'localVideo',
            // the id/element dom element that will hold remote videos
            remoteVideosEl: '',
            // immediately ask for camera access
            autoRequestMedia: true,
            debug: false,
            detectSpeakingEvents: true,
            autoAdjustMic: false
        });

        function display(name, message) {
            // Html encode display name and message.
            var encodedName = $('<div />').text(name).html();
            var encodedMsg = $('<div />').text(message).html();
            // Add the message to the page.
            $('#discussion').append('<li><strong>' + encodedName
                + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
        };



        $('#sendmessage').click(function () {

            var d = $('#displayname').val() + "," + $('#messageee').val();
            webrtc.sendDirectlyToAll('hark', 'chat', d);
            display($('#displayname').val(), $('#messageee').val());
            var tresc = $('#messageee').val();
            room = location.search && location.search.split('?')[1];
            $.post('https://' + location.host + '/History/Add', { content: tresc, roomnamee: room });

            // Clear text box and reset focus for next comment.
            $('#messageee').val('').focus();
        });


        webrtc.on('channelMessage', function (peer, label, data) {
            // Only handle messages from your dataChannel
            if (label !== 'hark') return;
            else if (data.type == 'chat') {

                console.log('Received message: ' + data.payload + ' from ' + peer.id);
                var name = data.payload.substring(0, data.payload.indexOf(','));
                var message = data.payload.substring(data.payload.indexOf(',') + 1, data.payload.length);
                display(name, message);
            }
        });




        // when it's ready, join if we got a room from the URL
        webrtc.on('readyToCall', function () {
            // you can name it anything
            if (room) webrtc.joinRoom(room);
        });

        function showVolume(el, volume) {
            if (!el) return;
            if (volume < -45) volume = -45; // -45 to -20 is
            if (volume > -20) volume = -20; // a good range
            el.value = volume;
        }

        // we got access to the camera
        webrtc.on('localStream', function (stream) {
            var button = document.querySelector('#createRoom>button');
            if (button) button.removeAttribute('disabled');
            $('#localVolume').show();
        });
        // we did not get access to the camera
        webrtc.on('localMediaError', function (err) {
        });

        // local screen obtained
        webrtc.on('localScreenAdded', function (video) {
            video.onclick = function () {
                video.style.width = video.videoWidth + 'px';
                video.style.height = video.videoHeight + 'px';
            };
            document.getElementById('localScreenContainer').appendChild(video);
            $('#localScreenContainer').show();
        });
        // local screen removed
        webrtc.on('localScreenRemoved', function (video) {
            document.getElementById('localScreenContainer').removeChild(video);
            $('#localScreenContainer').hide();
        });

        // a peer video has been added
        webrtc.on('videoAdded', function (video, peer) {
            console.log('video added', peer);
            document.getElementById('Showsend').style.display = 'block';
            document.getElementById('discussion').style.display = 'block';

            var remotes = document.getElementById('remotes');
            if (remotes) {
                var container = document.createElement('div');
                container.className = 'videoContainer';
                container.id = 'container_' + webrtc.getDomId(peer);
                container.appendChild(video);

                // suppress contextmenu
                video.oncontextmenu = function () { return false; };

                // resize the video on click
                video.onclick = function () {
                    container.style.width = video.videoWidth + 'px';
                    container.style.height = video.videoHeight + 'px';
                };

                // show the remote volume
                var vol = document.createElement('meter');
                vol.id = 'volume_' + peer.id;
                vol.className = 'volume';
                vol.min = -45;
                vol.max = -20;
                vol.low = -40;
                vol.high = -25;
                container.appendChild(vol);

                // show the ice connection state
                if (peer && peer.pc) {
                    var connstate = document.createElement('div');
                    connstate.className = 'connectionstate';
                    container.appendChild(connstate);
                    peer.pc.on('iceConnectionStateChange', function (event) {
                        switch (peer.pc.iceConnectionState) {
                            case 'checking':
                                connstate.innerText = 'Łączenie...';
                                break;
                            case 'connected':
                            case 'completed': // on caller side
                                $(vol).show();
                                connstate.innerText = 'Połączenie ustanowione.';
                                break;
                            case 'disconnected':
                                connstate.innerText = 'Rozłączono.';
                                break;
                            case 'failed':
                                connstate.innerText = 'Błąd połączenia.';
                                break;
                            case 'closed':
                                connstate.innerText = 'Połączenie zakończone.';
                                break;
                        }
                    });
                }
                remotes.appendChild(container);
            }
        });
        // a peer was removed
        webrtc.on('videoRemoved', function (video, peer) {
            console.log('video removed ', peer);
            var remotes = document.getElementById('remotes');
            var el = document.getElementById(peer ? 'container_' + webrtc.getDomId(peer) : 'localScreenContainer');
            if (remotes && el) {
                remotes.removeChild(el);
            }
        });

        // local volume has changed
        webrtc.on('volumeChange', function (volume, treshold) {
            showVolume(document.getElementById('localVolume'), volume);
        });
        // remote volume has changed
        webrtc.on('remoteVolumeChange', function (peer, volume) {
            showVolume(document.getElementById('volume_' + peer.id), volume);
        });

        // local p2p/ice failure
        webrtc.on('iceFailed', function (peer) {
            var connstate = document.querySelector('#container_' + webrtc.getDomId(peer) + ' .connectionstate');
            console.log('local fail', connstate);
            if (connstate) {
                connstate.innerText = 'Connection failed.';
                fileinput.disabled = 'disabled';
            }
        });

        // remote p2p/ice failure
        webrtc.on('connectivityError', function (peer) {
            var connstate = document.querySelector('#container_' + webrtc.getDomId(peer) + ' .connectionstate');
            console.log('remote fail', connstate);
            if (connstate) {
                connstate.innerText = 'Connection failed.';
                fileinput.disabled = 'disabled';
            }
        });

        // czynności wykonywane podczas dołączania do pokoju
        function setRoom(name) {
            document.getElementById('createRoom').remove();
            document.getElementById('Showsend').style.display = 'block';
            document.getElementById('discussion').style.display = 'block';

            document.getElementById('title').innerText = 'Pokój: ' + name;
            document.getElementById('subTitle').innerText = 'Link do pokoju: ' + location.href;
            $('body').addClass('active');

            // pokazywanie formularza dodawania znajomego do pokoju i listy znajomych
            $("#addFriend").show();
            $("#friendsTable").show();

            // dodawanie skryptu informującego serwer o opuszczeniu strony z pokojem
            $(function () {
                $('<script>')
                  .attr('type', 'text/javascript')
                  .text(function () {
                      window.onbeforeunload = confirmExit;
                      function confirmExit() {
                          $.ajax({
                              url: 'https://' + location.host + '/Home/leavingRoom',
                              type: 'POST',
                              data: { roomname: name },
                              success: function (data) {
                                  console.log("success");
                              }
                          });
                          console.log("wyjście");
                      }
                  })
                  .appendTo('head');
            })
        }

        // jeśli użytkownik wszedł do pokoju do zmień przyciski na informację o pokoju,
        // w przeciwnym wypadku pokaż formularz tworzenia nowego pokoju
        if (room) {
            setRoom(room);
        } else {
            $('#createRoom').submit(function () {
                var val = $('#sessionInput').val().toLowerCase().replace(/\s/g, '-').replace(/[^A-Za-z0-9_\-]/g, '');
                if (val == '') {
                    $('#subTitle').text('Pokój musi mieć nazwę!');
                    return false;
                }
                // Informacja o tworzeniu pokoju
                $('#createRoom').hide();
                $('#subTitle').text('Tworzenie pokoju...');

                var pass = $('#passwordInput').val();
                $.post('https://' + location.host + '/Home/createRoom',
                    { name: val, password: pass },
                        function (data) {
                            console.log(data);
                            if (data == 'ok') {
                                // tworzenie pokoju
                                webrtc.createRoom(val, function (err, name) {
                                    console.log(' create room cb', arguments);


                                    var newUrl = location.pathname + '?' + name;
                                    if (!err) {
                                        history.replaceState({ foo: 'bar' }, null, newUrl);
                                        setRoom(name);
                                    } else {
                                        console.log(err);
                                    }
                                });
                            }//if
                            else {
                                // informacja o błędzie
                                $('#createRoom').show();
                                $('#subTitle').text(data);
                            }//else
                        });
                // nie odświeżaj strony
                return false;
            });
        }

        var button = document.getElementById('screenShareButton'),
            setButton = function (bool) {
                button.innerText = bool ? 'Udostępnij podgląd pulpitu' : 'Zatrzymaj udostępnianie podglądu pulpitu';
            };
        if (!webrtc.capabilities.screenSharing) {
            //button.disabled = 'disabled';
        }
        webrtc.on('localScreenRemoved', function () {
            setButton(true);
        });

        setButton(true);

        button.onclick = function () {
            if (webrtc.getLocalScreen()) {
                webrtc.stopScreenShare();
                setButton(true);
            } else {
                webrtc.shareScreen(function (err) {
                    if (err) {
                        setButton(true);
                    } else {
                        setButton(false);
                    }
                });

            }
        };
        // called when a peer is created
        webrtc.on('createdPeer', function (peer) {
            console.log('createdPeer', peer);
            var remotes = document.getElementById('remotes');
            if (!remotes) return;
            var container = document.createElement('div');
            container.className = 'peerContainer';
            container.id = 'container_' + webrtc.getDomId(peer);

            // pokaż id peer'a
            var peername = document.createElement('div');
            peername.className = 'peerName';
            peername.appendChild(document.createTextNode('Peer: ' + peer.id));
            //container.appendChild(peername);

            // show a list of files received / sending
            var filelist = document.createElement('ul');
            filelist.className = 'fileList';
            container.appendChild(filelist);

            // show a file select form
            var fileinput = document.createElement('input');
            fileinput.type = 'file';

            // send a file
            fileinput.addEventListener('change', function () {
                fileinput.disabled = true;

                var file = fileinput.files[0];
                var sender = peer.sendFile(file);

                // create a file item
                var item = document.createElement('li');
                item.className = 'sending';

                // make a label
                var span = document.createElement('span');
                span.className = 'filename';
                span.appendChild(document.createTextNode(file.name));
                item.appendChild(span);

                span = document.createElement('span');
                span.appendChild(document.createTextNode(' ' + file.size + ' bytes'));
                item.appendChild(span);

                // create a progress element
                var sendProgress = document.createElement('progress');
                sendProgress.max = file.size;
                item.appendChild(sendProgress);

                // hook up send progress
                sender.on('progress', function (bytesSent) {
                    sendProgress.value = bytesSent;
                });
                // sending done
                sender.on('sentFile', function () {
                    item.appendChild(document.createTextNode(' Wysłano'));

                    // we allow only one filetransfer at a time
                    fileinput.removeAttribute('disabled');
                });
                // receiver has actually received the file
                sender.on('complete', function () {
                    // safe to disconnect now
                });
                filelist.appendChild(item);
            }, false);
            fileinput.disabled = 'disabled';
            container.appendChild(fileinput);

            // show the ice connection state
            if (peer && peer.pc) {
                var connstate = document.createElement('div');
                connstate.className = 'connectionstate';
                container.appendChild(connstate);
                peer.pc.on('iceConnectionStateChange', function (event) {
                    var state = peer.pc.iceConnectionState;
                    console.log('state', state);
                    container.className = 'peerContainer p2p' + state.substr(0, 1).toUpperCase()
                        + state.substr(1);
                    switch (state) {
                        case 'checking':
                            connstate.innerText = 'Łączenie...';
                            break;
                        case 'connected':
                        case 'completed': // on caller side
                            connstate.innerText = 'Połączenie ustanowione.';
                            // enable file sending on connnect
                            fileinput.removeAttribute('disabled');
                            break;
                        case 'disconnected':
                            connstate.innerText = 'Rozłączono.';
                            break;
                        case 'failed':
                            // not handled here
                            break;
                        case 'closed':
                            connstate.innerText = 'Połączenie zakończone.';

                            // disable file sending
                            fileinput.disabled = 'disabled';
                            // FIXME: remove container, but when?
                            break;
                    }
                });
            }
            remotes.appendChild(container);

            // receiving an incoming filetransfer
            peer.on('fileTransfer', function (metadata, receiver) {
                console.log('incoming filetransfer', metadata);
                var item = document.createElement('li');
                item.className = 'receiving';

                // make a label
                var span = document.createElement('span');
                span.className = 'filename';
                span.appendChild(document.createTextNode(metadata.name));
                item.appendChild(span);

                span = document.createElement('span');
                span.appendChild(document.createTextNode(metadata.size + ' bytes'));
                item.appendChild(span);

                // create a progress element
                var receiveProgress = document.createElement('progress');
                receiveProgress.max = metadata.size;
                item.appendChild(receiveProgress);

                // hook up receive progress
                receiver.on('progress', function (bytesReceived) {
                    receiveProgress.value = bytesReceived;
                });
                // get notified when file is done
                receiver.on('receivedFile', function (file, metadata) {
                    console.log('received file', metadata.name, metadata.size);
                    var href = document.createElement('a');
                    href.href = URL.createObjectURL(file);
                    href.download = metadata.name;
                    href.appendChild(document.createTextNode(' Pobierz'));
                    item.appendChild(href);

                    // close the channel
                    receiver.channel.close();
                });
                filelist.appendChild(item);
            });
        });
    </script>

}
else
{
    <div class="jumbotron">
        <h1>Wideo-Konferencje</h1>
        <p class="lead">Aby korzystać z usług naszego serwisu musisz się zarejestrować lub zalogować na istniejące konto</p>
        <p><a class="btn btn-default" href=@Url.Action("Register", "Account")>Rejestracja</a></p>
        <p><a class="btn btn-default" href=@Url.Action("Login", "Account")>Zaloguj</a></p>
    </div>

}
